var Level2MenuMap = new Object();
var gLevel2MenuObj = null;
var Level2Menu = function(opt){
	this.target = opt.target?opt.target:'level2Menu';
	this.focusType = opt.focusType?opt.focusType:false;		//焦点在导航上
	this.blurType = opt.blurType?opt.blurType:false;		//焦点在item上
	this.clickType = opt.clickType?opt.clickType:false;		//点击事件
	this.focusItem = opt.focusItem?opt.focusItem:false;		//焦点在导航上
	this.blurItem = opt.blurItem?opt.blurItem:false;		//焦点在item上
	this.clickItem = opt.clickItem?opt.clickItem:false;		//点击事件
	this.moveRight = opt.moveRight?opt.moveRight:false;		//离开事件
	this.disNum = opt.disNum?opt.disNum:8;	
		
	this.focusClass = '_level2MenuCurItem';
	this.clickClass = '_level2MenuClickItem';
	this.normalClass = '_level2MenuItem';
	this.itemHeight = 52;
	this.itemWidth = 200;
	this.moveTime = 4;
	this.bgWidth = 198;
	this.box1 = 'level2MenuContentBox1';
	this.box2 = 'level2MenuContentBox2';
	this.contentBox = '_level2MenuContentBox';
	this.content1 = 'level2MenuList1';
	this.content2 = 'level2MenuList2';
	this.topDiv1 = 'pLevelMenuBoxUp1';
	this.topDiv2 = 'pLevelMenuBoxUp2';
	this.bottomDiv1 = 'pLevelMenuBoxDown1';
	this.bottomDiv2 = 'pLevelMenuBoxDown2';
	this.toLeft = 'pLevelMenuToLeft';
	this.toRight = 'pLevelMenuToRight';
	this.bg = 'pLevel2MenuContentBg';
	this.menuContent = 'level2MenuContent';
	
	this.curTypeId = 0;
	this.focusTypeId = 0; 
	this.curTopTypeId = 0;
	this.curItemId = 0;
	this.focusItemId = 0;
	this.curTopItemId = 0;
	
	this.typeList = new Array();
	this.dataList = null;
	this.curRegion = '';
	this.level2Show = false;
	this.level1Show = true;
	Level2MenuMap[this.target] = this;
	gLevel2MenuObj = this;
}

Level2Menu.prototype = {
	getType:function(){
		if(this.curTypeId >0){
			return this.typeList[this.curTypeId - 1];
		}else{
			return false;
		}
	},
	getCurType:function(){
		var type = false;
		
		return false;
	},
	getData:function(){
		if(this.curItemId > 0){
			return this.dataList[this.curItemId - 1];
		}else{
			return false;
		}
	},
	setFocus:function(){
		var type = this.typeList[this.curTypeId - 1];
		if(type.dataList && type.dataList.length > 1){
			var a = document.getElementById(this.target+'-item-'+this.focusItemId);
			if(a){
				a.focus();
			}
		}else{
			var a = document.getElementById(this.target+'-a-'+this.curTypeId);
			if(a){
				a.focus();
			}
		}
	},
	setDataList:function(list,onfocus){
		this.typeList = list;
		this.curTypeId = -1;
		this.focusTypeId = 1;
		this.curTopTypeId = 0;
		
		var content = document.getElementById(this.content1);
		content.style.top = (0 - this.curTopTypeId * this.itemHeight)+'px';
		
		var typeBottom = document.getElementById(this.bottomDiv1);
		var typeTop = document.getElementById(this.topDiv1);
		
		typeBottom.style.display ='none';
		typeTop.style.display = 'none';
		
		this.refreshTypeContent();
		if(onfocus){
			var a = document.getElementById(this.target+'-a-'+this.focusTypeId);
			if(a){
				a.focus();
			}
		}
	},
	refreshTypeContent:function(){
		var con = '';
		if(this.typeList){
			for(var i=0;i<this.typeList.length;i++){
				con +='<div class="'+this.normalClass+'">'+this.formatTypeHtml(this.typeList[i],i+1)+'</div>';
			}
		}
		var box = document.getElementById(this.content1);
		box.innerHTML = con;
		
		var aList = box.getElementsByTagName('a');
		var a;
		for(var i = 0;i<aList.length;i++){
			a = aList[i];
			a.onfocus = this.onfocusType;
			a.onblur = this.onblurType;
			a.onclick = this.onclickType;
		}
	},
	formatTypeHtml:function(type,id){
		var con = '<div><a href="#" id="'+this.target+'-a-'+id+'">'+type.name+'</a></div>';
		return con;
	},
	onfocusType:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;
		var idArray = id.split('-');
		var _this = Level2MenuMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		
		par.className = _this.focusClass;
		var data = _this.typeList[tar - 1];
		
		_this.changeTypePos(tar);
		_this.changeToRight(data,tar); 
		
		_this.focusTypeId = tar;
		_this.curRegion = 'type';
		KEY.CURTYPE = 'level2Menu';
		if(_this.focusType){
			_this.focusType(data,tar);
		}
	},
	onblurType:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;
		var idArray = id.split('-');
		var _this = Level2MenuMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		
		if(tar == _this.curTypeId){
			par.className = _this.clickClass;
		}else{
			par.className = _this.normalClass;
		}
		var toRight = document.getElementById(_this.toRight);
		toRight.style.display = 'none';
		KEY.CURTYPE = false;
		if(_this.blurType){
			var data = _this.typeList[tar - 1];
			_this.blurType(data,tar);
		}
	},
	onclickType:function(event){
		var a = event.currentTarget;
		var id = a.id;
		var idArray = id.split('-');
		var _this = Level2MenuMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		var type = _this.typeList[tar - 1];
		var dataList = type.dataList;
		
		var lastTypeA = document.getElementById(idArray[0]+'-a-'+_this.curTypeId);
		if(lastTypeA && _this.curTypeId!=tar){
			var par = lastTypeA.parentNode.parentNode;
			par.className = _this.normalClass;
		}
		_this.curTypeId = tar;
		if(dataList && dataList.length> 0){
			_this.changeMenu2(type);
			//_this.hideTypeContent();
		}else{
			if(_this.clickType){
				_this.clickType(type,tar);
			}
		}
	},
	
	changeToRight:function(type,tar){
		var dataList = type.dataList;
		var toRight = document.getElementById(this.toRight);
		if(dataList && dataList.length> 0){
			var top = (tar - this.curTopTypeId - 1) * this.itemHeight -2;
			toRight.style.display = 'block';
			toRight.style.top = top;
		}else{
			toRight.style.display = 'none';
		}
	},
	changeTypePos:function(tar){ 
		if(this.disNum >= this.typeList.length)  return ;
		if(tar != this.focusTypeId ){
			if(tar - this.curTopTypeId == this.disNum + 1){
				this.curTopTypeId ++;
				var box = document.getElementById(this.content1);
				box.style.top = (0 -this.curTopTypeId * this.itemHeight);
			}else if(tar == this.curTopTypeId){
				this.curTopTypeId --;
				var box = document.getElementById(this.content1);
				box.style.top = (0 -this.curTopTypeId * this.itemHeight);
			}
			
			
			var typeBottom = document.getElementById(this.bottomDiv1);
			var typeTop = document.getElementById(this.topDiv1);
			if(tar - this.curTopTypeId == this.disNum && tar != this.typeList.length){
				typeBottom.style.display = 'block';
			}else{
				typeBottom.style.display = 'none';
			}
			if(tar-this.curTopTypeId == 1 && tar!=1){
				typeTop.style.display = 'block';
			}else{
				typeTop.style.display = 'none';
			}
			
		}
		
	},
	changeMenu2:function(type){
		this.level2Show = true;
		this.dataList = type.dataList;
		this.curItemId = 0;
		this.focusItemId = 1;
		this.curTopItemId = 0;
		var content = document.getElementById(this.contentBox);
		
		stopAnimate(content, false,false);	
		animate(content,{
				left:0-this.bgWidth,
			},this.moveTime);
			
		/*
		stopAnimate(bg, false,false);	
		animate(bg,{
				width:this.bgWidth,
			},this.moveTime);
			
		stopAnimate(content, false,false);	
		animate(content,{
				left:0,
			},this.moveTime);
		*/
		
		var typeBottom = document.getElementById(this.bottomDiv1);
		var typeTop = document.getElementById(this.topDiv1);
		
		typeBottom.style.display ='none';
		typeTop.style.display = 'none';
		
		var toLeft = document.getElementById(this.toLeft);
		toLeft.style.display = 'block';
		this.refreshItemContent();
		
		var a = document.getElementById(this.target+'-item-'+this.focusItemId);
		if(a){
			a.focus();
		}
	},
	refreshItemContent:function(){
		var con = '';
		if(this.dataList){
			for(var i=0;i<this.dataList.length;i++){
				con +='<div class="'+this.normalClass+'">'+this.formatItemHtml(this.dataList[i],i+1)+'</div>';
			}
		}
		var box = document.getElementById(this.content2);
		box.style.top= '0px';
		box.innerHTML = con;
		
		var aList = box.getElementsByTagName('a');
		var a;
		for(var i = 0;i<aList.length;i++){
			a = aList[i];
			a.onfocus = this.onfocusItem;
			a.onblur = this.onblurItem;
			a.onclick = this.onclickItem;
		}
	},
	formatItemHtml:function(data,id){
		var con = '<div><a href="#" id="'+this.target+'-item-'+id+'">'+data.name+'</a></div>';
		return con;
	},
	onfocusItem:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;
		var idArray = id.split('-');
		var _this = Level2MenuMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		
		par.className = _this.focusClass;
		
		_this.changeItemPos(tar);
		_this.focusItemId = tar;
		_this.curRegion = 'item';
		KEY.CURTYPE = 'level2Menu';
		if(_this.focusItem){
			var data = _this.dataList[tar - 1];
			_this.focusItem(data,tar);
		}
	},
	
	onblurItem:function(event){
		var a = event.currentTarget;
		var par = a.parentNode.parentNode;
		var id = a.id;a
		var idArray = id.split('-');
		var _this = Level2MenuMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		
		if(tar == _this.curItemId){
			par.className = _this.clickClass;
		}else{
			par.className = _this.normalClass;
		}
		
		var typeBottom = document.getElementById(_this.bottomDiv2);
		var typeTop = document.getElementById(_this.topDiv2);
			
		typeBottom.style.display = 'none';
		typeTop.style.display = 'none';
		
		KEY.CURTYPE = false;
		if(_this.blurItem){
			var data = _this.dataList[tar - 1];
			_this.blurItem(data,tar);
		}
	},
	onclickItem:function(event){
		var a = event.currentTarget;
		var id = a.id;
		var idArray = id.split('-');
		var _this = Level2MenuMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		
		if(_this.curItemId != tar){
			var lastItemA = document.getElementById(idArray[0]+'-item-'+_this.curItemId);
			if(lastItemA){
				var par = lastItemA.parentNode.parentNode;
				par.className = _this.normalClass;
			}
			_this.curItemId = tar;
			
			
			//_this.hideTypeContent();
			
			if(_this.clickItem){
				var type = _this.typeList[_this.curTypeId - 1];
				var data = _this.dataList[tar - 1];
				_this.clickItem(data,type,tar,_this);
			}
		}
	},
	hideTypeContent:function(){
		this.level1Show = false;
		var toLeft = document.getElementById(this.toLeft);
		toLeft.style.display = 'block';
		
		var menuContent = document.getElementById(this.menuContent);
		stopAnimate(menuContent, false,false);	
		animate(menuContent,{
				left:0 - this.bgWidth,
			},this.moveTime);
		var bg = document.getElementById(this.bg);
		stopAnimate(bg, false,false);	alert('Here');
		animate(bg,{
				width:0,
			},this.moveTime);
	},
	showLevel1MenuBox2:function(){
		this.level1Show = true;
		var toLeft = document.getElementById(this.toLeft);
		toLeft.style.display = 'none';
		var menuContent = document.getElementById(this.menuContent);
		menuContent.style.left = 0;
		var bg = document.getElementById(this.bg);
		bg.style.width = this.bgWidth;
	},
	showLevel1MenuBox:function(){
		this.level1Show = true;
		var toLeft = document.getElementById(this.toLeft);
		toLeft.style.display = 'none';
		var menuContent = document.getElementById(this.menuContent);
		stopAnimate(menuContent, false,false);	
		animate(menuContent,{
				left:0 ,
			},this.moveTime);
		var bg = document.getElementById(this.bg);
		stopAnimate(bg, false,false);	
		animate(bg,{
				width:this.bgWidth,
			},this.moveTime);
		
	},
	changeItemPos:function(tar){
		if(this.disNum >= this.dataList.length) return;
		
		if(tar != this.focusItemId ){
			if(tar - this.curTopItemId == this.disNum + 1){
				this.curTopItemId ++;
				var box = document.getElementById(this.content2);
				box.style.top = (0 -this.curTopItemId * this.itemHeight);
			}else if(tar == this.curTopItemId){
				this.curTopItemId --;
				var box = document.getElementById(this.content2);
				box.style.top = (0 -this.curTopItemId * this.itemHeight);
			}
			
			var typeBottom = document.getElementById(this.bottomDiv2);
			var typeTop = document.getElementById(this.topDiv2);
			if(tar - this.curTopItemId == this.disNum && tar != this.dataList.length){
				typeBottom.style.display = 'block';
			}else{
				typeBottom.style.display = 'none';
			}
			if(tar-this.curTopItemId == 1 && tar!=1){
				typeTop.style.display = 'block';
			}else{
				typeTop.style.display = 'none';
			}
			
		}
		
	},
	keyRight:function(){
		if(this.curRegion == 'type'){
			
			var type = this.typeList[this.focusTypeId - 1];
			if(type.dataList && type.dataList.length > 0){
				var a = document.getElementById(this.target+'-a-'+this.focusTypeId);
				a.click();
			}else{
				this.leaveBox();
			}
			return;
			/*
			if(this.level2Show && false){		//如果2级菜单显示
				var a = document.getElementById(this.target+'-item-'+this.focusItemId);
				if(a){
					a.focus();
				}
			}else{
				this.leaveBox();
			}
			*/
		}else if(this.curRegion == 'item'){
			if(!this.level1Show || true){
				this.leaveBox();
			}
		}
	},
	keyLeft:function(){
		if(this.curRegion == 'item'){
			var a = document.getElementById(this.target+'-a-'+this.focusTypeId);
			a.focus();
			this.hideLevel2MenuBox();
		}
	},
	hideLevel2MenuBox:function(){
		this.level2Show = false;
		var content = document.getElementById(this.contentBox);
		var bg = document.getElementById(this.bg);
		stopAnimate(bg, false,false);	
	
			
		stopAnimate(content, false,false);	
		animate(content,{
				left:0,
			},this.moveTime,this.clearRightContent);
		
		var toLeft = document.getElementById(this.toLeft);
		toLeft.style.display = 'none';
	},
	clearRightContent:function(){
		var box = document.getElementById(gLevel2MenuObj.content2);
		box.innerHTML = '';
	},
	leaveBox:function(){
		if(this.moveRight){
			this.moveRight();
		}
	},
	returnFun:function(){
		if(this.curRegion == 'type'){
			if(this.level2Show){		//如果2级菜单显示
				this.hideLevel2MenuBox();
			}else{
				KEY.KEY_RETURN ();
			}
		}else if(this.curRegion == 'item'){
			if(!this.level1Show){
				this.showLevel1MenuBox2();
			
				var a = document.getElementById(this.target+'-a-'+this.focusTypeId);
				a.focus();
				this.hideLevel2MenuBox();
			}else{
				var a = document.getElementById(this.target+'-a-'+this.focusTypeId);
				a.focus();
				this.hideLevel2MenuBox();
			}
		}
	}
}

KEY.TYPE['level2Menu'] = keyRecvLevel2Menu;

function keyRecvLevel2Menu(key){
	
	if(key == 0x11){		//返回
		
		gLevel2MenuObj.returnFun();
		return false;
	}else if(key ==0xD){		//向右
		gLevel2MenuObj.keyRight();
		return false;
	}else if(key == 0xC){		//向左
		gLevel2MenuObj.keyLeft();
		return false;
	}
	return true;
}